<template>
	<div class="screen-box">
		<div class="swiper-container swiper-container-horizontal">
			<div class="swiper-wrapper">
				<div class="swiper-slide screen-item insurance-compay" v-tap="{methods:onClickTit,id:'insurance-compay'}">
					<span>
						保险公司<i class="icon iconfont"></i>
					</span>
				</div>
				<div class="swiper-slide screen-item insurance-proudct" v-tap="{methods:onClickTit,id:'insurance-proudct'}">
					<span>
						保险种类<i class="icon iconfont"></i>
					</span>
				</div>	
			</div>
		</div>
		<div class="screen-conten-box mui-hidden" id="insurance-compay">
			<div class="padding-left-right-15">
				<div class="label-item">
					<div class="label-option-item none-item-com" v-tap="{methods:clickLable,type:'com',val:null}">不限</div>
					<template v-for="(item,$key) in insurcom">
						<div class="label-option-item options-com" v-tap="{methods:clickLable,type:'com',val:item.id}">{{item.title}}</div>
					</template>
				</div>
			</div>
		</div>
		<div class="screen-conten-box mui-hidden" id="insurance-proudct">
			<div class="padding-left-right-15">
				<div class="label-item">
					<div class="label-option-item none-item-proudct" v-tap="{methods:clickLable,type:'prodct',val:null}">不限</div>
					<template v-for="(item,$key) in prouType">
						<div class="label-option-item options-product" v-tap="{methods:clickLable,type:'prodct',val:item.name}">{{item.value}}</div>
					</template>
					
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Swiper from 'swiper'
	import 'swiper/dist/css/swiper.min.css'
	import {isInArray} from '../../gloabl/common.js'
	export default{
		data:function(){
			return{
				prouType:[ //保险类别
					{
						name:'LIFE',
						value:'人寿险'
					},
					{
						name:'MEDICAL',
						value:'医疗险'
					},
					{
						name:'HEAVY_RISK',
						value:'重疾险'
					},
					{
						name:'SAVING',
						value:'储蓄险'
					}
				],
				where:{
					com:[],
					product:[]
				}
			}
		},
		mounted:function(){
			this.$nextTick(function () {
				let swiper = new Swiper('.swiper-container', {
					slidesPerView: 'auto',
					freeMode:true,
					freeModeMomentum:true,
					freeModeMomentumRatio : 2,
					freeModeMomentumVelocityRatio:2,
					spaceBetween: 0,
					autoplayDisableOnInteraction:false,
					observer:true,
					observeParents:true,
				})
			})
		},
		props:['insurcom'],
		methods:{
			clickLable(params){//点击选择标签事件
				let classList=params.event.currentTarget.classList;
				let val = params.val;
				let type = params.type;
				
				
				if(isInArray(classList,'label-active')){
					classList.remove('label-active');
				}else{
					classList.add('label-active');
				}
				if(!val&&type=='com'){
					let obj = document.getElementsByClassName('options-com');
					
					for (let s of obj) {
						s.classList.remove('label-active');
					}
					this.where.com=[];
				}
				if(val&&type=='com'){
					document.getElementsByClassName('none-item-com')[0].classList.remove('label-active');
					if(isInArray(this.where.com,val)){
						this.where.com.splice(this.where.com.indexOf(val));
					}else{
						this.where.com.push(val);
					}
				}
				if(!val&&type=='prodct'){
					let obj = document.getElementsByClassName('options-product');
					for (let s of obj) {
						s.classList.remove('label-active');
					}
					this.where.product=[];
				}
				if(val&&type=='prodct'){
					document.getElementsByClassName('none-item-proudct')[0].classList.remove('label-active');
					if(isInArray(this.where.product,val)){
						this.where.product.splice(this.where.com.indexOf(val));
					}else{
						this.where.product.push(val);
					}
				}
				this.$emit('clickLable', this.where);
			},
			onClickTit(params){ //筛选列表点击事件
				let id_name = params.id;
				let this_tap = params.event.currentTarget;
				let classList = this_tap.classList;
				let next_id = 'insurance-compay';
				let top = 0;
				let leng = 0
				if(id_name=='insurance-compay'){
					next_id = 'insurance-proudct'; 
					leng = this.insurcom.length+1;
				}else{
					leng = this.prouType.length+1;
				}
				top = Math.ceil(leng/3)*50+133;
				document.getElementById('pullrefresh').style="top:"+top+"px";
				document.getElementsByClassName(next_id)[0].classList.remove('click-active');
				if(!isInArray(classList,'click-active')){
					this_tap.classList.add('click-active');
				}else{
					document.getElementById('pullrefresh').style = "top:113px";
					this_tap.classList.remove('click-active');
				}
				if(document.getElementById(next_id).classList.length==1){
					document.getElementById(next_id).classList.add('mui-hidden');	
				}
				if(document.getElementById(id_name).classList.length>1){
					document.getElementById(id_name).classList.remove('mui-hidden');
				}else{
					document.getElementById(id_name).classList.add('mui-hidden')
				}
			}
		}
	}
</script>
<style scoped="scoped">
	.label-option-item{
		width: 29%;
		height: 40px;
		float: left;
		border: 1px solid #ebebeb;
		text-align: center;
		line-height: 40px;
		margin: 5px 5px;
	}
	.label-item{
		padding: 10px 0;
		position: relative;
		overflow: hidden;
	}
	.screen-conten-box{
		width: 100%;
		position: relative;
	}
	.screen-box{
		width: 100%;
		position: relative;
		display: block;
		background: #FFFFFF;
	}
	.swiper-container{
		border-bottom: 1px solid #F5F5F5;
	}
	.screen-item{
		margin: 0;
		padding: 0;
		position: relative;
		text-align: center;
		display: block;
		-webkit-box-flex: 1;
		width: 50%;
		padding: 15px 0;
		font-size: 14px;
	}
	.screen-item .icon{
		font-size: 12px;
	}
	.screen-item .icon:before{
		    content: "\E601";
	}
	.click-active{
		color: #F08800;
	}
	.click-active span{
		padding-bottom: 15px;
		border-bottom: 2px solid #F08800;
	}
	.click-active .icon:before{
		content: "\E600";
	}
	.label-active{
		border: 1px solid #F08800;
		color: #F08800;
	}
</style>